<template>
  <div class="tenantMenu_main main_container AddOrUpdate_main add_container add_container_table">

    <div class="main_header">
      <div class="padding_container">
        <div class="left"><Breadcrumb /></div>
        <div class="right">
          <HeaderOperation :parent="this" />
        </div>
      </div>
    </div>
    <div ref="main_main" class="main_main">
      <div class="container">
        <div class="plan_left">
          <div class="header">生产计划</div>
          <div v-for="item in planList" :key="item.id" class="plan_item" :class="[rowId==item.id?'activeClass':'']" @click="chooseCode(item)">{{ item.code }}</div>
        </div>
        <div class="plan_right">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane :style="{maxHeight:divHeight+'px',overflow:'auto',paddingBottom:'100px'}" label="物料清单" name="first">
              <div class="formItem_header">
                生产清单
                <div class="formItem_header_operate" />
              </div>
              <div ref="table_container1" class="table_container">
                <el-table
                  ref="table1"
                  :data="tableData"
                  stripe
                  border
                  style="width: 99.9%"
                  @selection-change="selectionChange1"
                >
                  <el-table-column type="selection" align="center" />
                  <el-table-column label="物料编码" min-width="120" :show-overflow-tooltip="true" prop="materialCode">
                    <template slot-scope="scope">
                      <span>{{ scope.row.materialCode }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="物料名称" min-width="100" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                      <span>{{ scope.row.materialName }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="规格型号" min-width="100" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                      <span>{{ scope.row.materialModel }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="物料分类" min-width="100">
                    <template slot-scope="scope">
                      <span>{{ scope.row.materialTypeName }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="物料属性" min-width="100">
                    <template slot-scope="scope">
                      <span>{{ scope.row.descriptionName }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="物料单位" min-width="100">
                    <template slot-scope="scope">
                      <span>{{ scope.row.materialUnitName }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="计划数量" prop="planNumber" :min-width="SETTINGS.settings_decimalDigits_length">
                    <template slot-scope="scope">
                      <span>{{ scope.row.planNumber }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="计划交期" min-width="140">
                    <template slot-scope="scope">
                      <span>{{ scope.row.planDealTime }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="备注" min-width="200">
                    <template slot-scope="scope">
                      <span>{{ scope.row.remark }}</span>
                    </template>
                  </el-table-column>
                </el-table></div>
              <div class="formItem_header" style="margin-top:20px">
                物料清单
                <div class="formItem_header_operate">
                  <a class="formItem_header_operate_item" @click="changeToPurchase">
                    <svg-icon icon-class="新增" />
                    <div class="item_name">转采购申请单</div>
                  </a>
                </div>
              </div>
              <div ref="table_container2" class="table_container">
                <el-table
                  ref="table"
                  :data="materialData"
                  :header-cell-class-name="headerCellClassName"
                  stripe
                  border
                  :header-cell-style="{'text-align':'center'}"
                  :cell-style="{'text-align':'center'}"
                >

                  <el-table-column label="物料编码" min-width="120" :show-overflow-tooltip="true" prop="materialCode">
                    <template slot-scope="scope">
                      <span>{{ scope.row.materialCode }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="物料名称" min-width="100" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                      <span>{{ scope.row.materialName }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="规格型号" min-width="100" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                      <span>{{ scope.row.materialModel }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="物料分类" min-width="100">
                    <template slot-scope="scope">
                      <span>{{ scope.row.materialTypeName }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="物料属性" min-width="100">
                    <template slot-scope="scope">
                      <span>{{ scope.row.descriptionName }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="物料单位" min-width="100">
                    <template slot-scope="scope">
                      <span>{{ scope.row.materialUnitName }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="库存数量" prop="stockNum" :min-width="SETTINGS.settings_decimalDigits_length">
                    <template slot-scope="scope">
                      <span :style="{color:Number(scope.row.stockNum)<Number(scope.row.needNumber)?'red !important':''}">{{ scope.row.stockNum }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="待入库数量" prop="toInWarehouseNumber" :min-width="SETTINGS.settings_decimalDigits_length">
                    <template slot-scope="scope">
                      <span>{{ scope.row.inWarehouseNumber }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="需求数量" prop="needNumber" :min-width="SETTINGS.settings_decimalDigits_length">
                    <template slot-scope="scope">
                      <span>{{ scope.row.needNumber }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="替代料" prop="replaceMaterialCodeNames" min-width="140" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                      <span>{{ scope.row.replaceMaterialCodeNames }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column min-width="100">
                    <template slot="header" slot-scope="scope">
                      <el-checkbox v-model="isSelectAll" :indeterminate="indeterminate" placeholder="请输入" />
                      <span style="margin-left:10px">是否采购</span>
                    </template>
                    <template slot-scope="scope">
                      <el-checkbox v-model="scope.row.isSelect" placeholder="请输入" />
                    </template>
                  </el-table-column>
                  <el-table-column label="采购数量" :min-width="SETTINGS.settings_decimalDigits_length" prop="applicationNumber">
                    <template slot-scope="scope">
                      <el-input v-if="(!scope.row.saleOrderDetails||scope.row.saleOrderDetails.length==1)||availabilityOfStatisticsOnProcurementCosts=='0'" v-model="scope.row.applicationNumber" placeholder="请输入" type="number" @input="changeApplicationNumber($event,scope.$index)" />
                      <el-input v-else v-model="scope.row.applicationNumber" placeholder="请选择" readonly type="number" @click.native="chooseApplicationNumber(scope.row,scope.$index)" />
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-tab-pane>
            <!-- 一姐让暂时隐藏，下个版本重新规划 -->
            <el-tab-pane v-if="false" :style="{maxHeight:divHeight+'px',overflow:'auto',paddingBottom:'100px'}" label="外协清单" name="second">
              <div class="formItem_header">
                生产清单
                <div class="formItem_header_operate" />
              </div>
              <div ref="table_container2" class="table_container">
                <el-table
                  ref="table2"
                  :data="tableData2"
                  stripe
                  border
                  style="width: 99.9%"
                  @selection-change="selectionChange2"
                >
                  <el-table-column type="selection" align="center" />
                  <el-table-column label="物料编码" min-width="120" prop="materialCode" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                      <span>{{ scope.row.materialCode }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="物料名称" min-width="100" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                      <span>{{ scope.row.materialName }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="规格型号" min-width="100" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                      <span>{{ scope.row.materialModel }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="物料分类" min-width="100">
                    <template slot-scope="scope">
                      <span>{{ scope.row.materialTypeName }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="物料属性" min-width="100">
                    <template slot-scope="scope">
                      <span>{{ scope.row.descriptionName }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="物料单位" min-width="100">
                    <template slot-scope="scope">
                      <span>{{ scope.row.materialUnitName }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="计划数量" prop="planNumber" :min-width="SETTINGS.settings_decimalDigits_length">
                    <template slot-scope="scope">
                      <span>{{ scope.row.planNumber }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="计划交期" min-width="140">
                    <template slot-scope="scope">
                      <span>{{ scope.row.planDealTime }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="备注" min-width="200">
                    <template slot-scope="scope">
                      <span>{{ scope.row.remark }}</span>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <div class="formItem_header" style="margin-top:20px">
                外协清单
                <div class="formItem_header_operate">
                  <a class="formItem_header_operate_item" @click="changeOutsource">
                    <svg-icon icon-class="新增" />
                    <div class="item_name">转外协订单</div>
                  </a>
                </div>
              </div>
              <div ref="table_container2" class="table_container">
                <el-table
                  ref="table"
                  :data="outsourcingData"
                  :header-cell-class-name="headerCellClassName"
                  stripe
                  border
                  style="width: 99.9%"
                >
                  <el-table-column label="物料编码" min-width="120" :show-overflow-tooltip="true" prop="materialCode">
                    <template slot-scope="scope">
                      <span>{{ scope.row.materialCode }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="物料名称" min-width="100" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                      <span>{{ scope.row.materialName }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="规格型号" min-width="100" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                      <span>{{ scope.row.materialModel }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="物料分类" min-width="100">
                    <template slot-scope="scope">
                      <span>{{ scope.row.materialTypeName }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="物料单位" min-width="100" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                      <span>{{ scope.row.materialUnitName }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="外协工序" prop="materialCode" min-width="100">
                    <template slot-scope="scope">
                      <span>{{ scope.row.engineeringProcessName }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="需求数量" :min-width="SETTINGS.settings_decimalDigits_length">
                    <template slot-scope="scope">
                      <span>{{ scope.row.needNumber }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column min-width="100">
                    <template slot="header" slot-scope="scope">
                      <el-checkbox v-model="isSelectAll2" :indeterminate="indeterminate2" placeholder="请输入" />
                      <span style="margin-left:10px">是否外协</span>
                    </template>
                    <template slot-scope="scope">
                      <el-checkbox v-model=" scope.row.isOutsource" placeholder="请输入" />
                    </template>
                  </el-table-column>
                  <el-table-column label="外协数量" :min-width="SETTINGS.settings_decimalDigits_length" prop="outsourceNumber">
                    <template slot-scope="scope">
                      <el-input v-model=" scope.row.outsourceNumber" placeholder="请输入" type="number" @input="changeOutsourceNumber($event,scope.$index)" />
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getMergeInfo } from '@/api/planManagement/planProductionOrder'
import { bomDetailBillOfMaterial1, requireBillOfMaterial2, listProduction } from '@/api/planManagement/planBOM'
import ChooseApplicationNumber from './chooseApplicationNumber'
import { getInfoByConfigKey } from '@/api/outsourceManage/outsourceReturnMaterial'
export default {
  name: 'JlinkMes11Frontend6Index',

  data() {
    return {
      rowId: null,
      planList: [],
      activeName: 'first',
      pageId: '计划物料清单', // 页面唯一标识
      pageData: {
        pageNum: 1,
        pageSize: 20,
        orderByColumn: 'updateTime',
        isAsc: 'desc'
      },
      materialData: [],
      outsourcingData: [],
      divHeight: 0,
      availabilityOfStatisticsOnProcurementCosts: 0,
      // tableKey: 1,
      total: 1, // 数据一共有多少条
      mainId: 'id', // 表格行ID
      tableHeight: '0', // 表格高度
      tableData: [], // 表格数据
      tableData2: [], // 表格数据
      tableColumns: [], // 表格实际用的字段
      searchColumns: [], // 搜索区实际用的字段
      selections: [], // 表格当前页所选中的行
      selectionsAll: [], // 表格所有页选中的行
      defaultTableColumns: [],
      defaultSearchColumns: [],
      materialCode: '',
      operationData: [],
      isAll1: false,
      isAll2: false,
      publicData: [],
      publicData2: [],
      isSelectAllData: false,
      isSelectAllData2: false
      // isSelectAll2: false
    }
  },
  computed: {
    isSelectAll: {
      get() {
        console.log(11111)
        if (this.materialData.length == 0) {
          return false
        } else {
          return this.materialData.every(item => item.isSelect)
        }
      },
      set(e) {
        const data = this.$deepClone(this.materialData)
        this.materialData = []
        data.forEach(item => {
          item.isSelect = e
        })
        this.$nextTick(() => {
          this.materialData = data
        })
      }
    },
    indeterminate: function() {
      if (this.materialData.filter(item => item.isSelect).length > 0 && this.materialData.filter(item => item.isSelect).length < this.materialData.length) {
        return true
      } else {
        return false
      }
    },
    isSelectAll2: {
      get() {
        if (this.outsourcingData.length == 0) {
          return false
        } else {
          return this.outsourcingData.every(item => {
            return item.isOutsource
          })
        }
      },
      set(e) {
        const data = this.$deepClone(this.outsourcingData)
        this.outsourcingData = []
        data.forEach(item => {
          item.isOutsource = e
        })
        this.$nextTick(() => {
          this.outsourcingData = data
        })
      }
    },
    indeterminate2: function() {
      if (this.outsourcingData.filter(item => item.isOutsource).length > 0 && this.outsourcingData.filter(item => item.isOutsource).length < this.outsourcingData.length) {
        return true
      } else {
        return false
      }
    }
  },
  watch: {
    // materialData: {
    //   handler: function(newVal, oldVal) {
    //     this.isSelectAll = this.materialData.every(item => item.isSelect)
    //   },
    //   deep: true,
    //   immediate: true
    // }
  },
  mounted() {
    this.getInfoByConfigKey()
  },
  methods: {

    getInfoByConfigKey() {
      getInfoByConfigKey('availabilityOfStatisticsOnProcurementCosts').then(res => {
        if (res.data.availabilityOfStatisticsOnProcurementCosts) {
          this.availabilityOfStatisticsOnProcurementCosts = res.data.availabilityOfStatisticsOnProcurementCosts
        } else {
          this.availabilityOfStatisticsOnProcurementCosts = 0
        }
      })
    },
    changeApplicationNumber(e, index) {
      const arr = this.$deepClone(this.materialData)
      if (arr[index].saleOrderDetails && arr[index].saleOrderDetails.length == 1) {
        const cacheData = this.$deepClone(arr[index].saleOrderDetails)
        cacheData[0].purchaseNum = e
        arr[index].planUnmergeData = JSON.stringify(cacheData)
      }
      arr[index].isCost = this.availabilityOfStatisticsOnProcurementCosts

      if (e) {
        arr[index].isSelect = true
      } else {
        arr[index].isSelect = false
      }
      this.materialData = arr
    },
    changeOutsourceNumber(e, index) {
      const arr = this.$deepClone(this.outsourcingData)
      if (e) {
        arr[index].isOutsource = true
      } else {
        arr[index].isOutsource = false
      }
      this.outsourcingData = arr
    },
    headerCellClassName(data) {
      if (['outsourceNumber', 'applicationNumber'].indexOf(data.column.property) != -1) {
        return 'column_bt'
      }
    },
    changeOutsource() {
      console.log(this.outsourcingData)
      this.outsourcingData.forEach(ele => {
        ele.processName = ele.engineeringProcessName
        ele.outId = ele.id
        delete ele.id
        delete ele.remark
      })
      this.$store.state.order.outsourceManageData = this.outsourcingData.filter(item => item.isOutsource)
      this.$store.state.order.isOutsourceManage = true
      if (this.$store.state.order.outsourceManageData.length > 0) {
        if (this.$store.state.order.outsourceManageData.filter(item => !item.outsourceNumber).length > 0) {
          this.$message.warning('外协数量不能为空')
          return
        } else if (this.$store.state.order.outsourceManageData.filter(item => item.isOutsource && !this.SETTINGS.reg_no_zero.test(item.outsourceNumber)).length > 0) {
          this.$message.warning('外协数量未正确填写')
          return
        } else {
          this.$router.push('/outsourceManage/outsourceOrder')
        }
      } else {
        this.$message.warning('请选择明细')
      }
      // if (this.$store.state.order.outsourceManageData.length > 0 && this.outsourcingData.filter(item => !this.SETTINGS.reg_no_zero.test(item.outsourceNumber)).length === 0) {
      //   this.$router.push('/outsourceManage/outsourceOrder')
      // } else if (this.outsourcingData.filter(item => !this.SETTINGS.reg_no_zero.test(item.outsourceNumber)).length > 0) {
      //   this.$message.error('表格中存在外协数量未正确填写的信息')
      //   return
      // } else {
      //   this.$message.error('请选择明细')
      //   return
      // }
    },
    changeToPurchase() {
      this.$store.state.order.purchaseData = this.materialData.filter(item => item.isSelect)
      this.$store.state.order.isPurchase = true
      if (this.$store.state.order.purchaseData.length > 0) {
        if (this.$store.state.order.purchaseData.filter(item => !item.applicationNumber).length > 0) {
          this.$message.warning('采购数量不能为空')
          return
        } else if (this.$store.state.order.purchaseData.filter(item => item.isSelect && !this.SETTINGS.reg_no_zero.test(item.applicationNumber)).length > 0) {
          this.$message.warning('采购数量未正确填')
        } else {
          this.$router.push('/purchaseManage/purchaseApply')
        }
      } else {
        this.$message.warning('请选择明细')
      }
    },
    selectionChange1(e) {
      // this.isAll1 ? this.publicData = this.tableData : this.publicData = e
      // if (this.publicData.length > 0) {
      //   requireBillOfMaterial(this.publicData).then(res => {
      //     this.isAll1 = false
      //     this.materialData = res.data
      //     this.materialData.forEach(item => {
      //       item.materialCodeOne = this.materialCode
      //       item.materialUnitLabel = item.materialUnitName
      //       item.inventoryNumber = item.stockNum
      //       item.requireNumber = item.needNumber
      //       item.isSelectPurchase = true
      //     })
      //   })
      // } else {
      //   this.materialData = []
      // }
      // 后端需要这样的格式
      // console.log(e)
      const arr = []
      if (e.length == 0) {

      } else {
        e.map((item) => {
          arr.push(item.id)
        })
      }
      // const engineeringRequirementId = this.engineeringRequirementIdData2.join(',')
      const planProductionDetailIds = arr.join(',')
      requireBillOfMaterial2(planProductionDetailIds).then(res => {
        this.isAll1 = false
        this.materialData = res.data
        this.materialData.forEach(item => {
          item.materialCodeOne = this.materialCode
          item.materialUnitLabel = item.materialUnitName
          item.inventoryNumber = item.stockNum
          item.requireNumber = item.needNumber
          item.isSelectPurchase = true
        })
      })
    },
    selectionChange2(e) {
      // this.isAll2 ? this.publicData2 = this.tableData2 : this.publicData2 = e
      // if (this.publicData2.length > 0) {
      //   requireBillOfMaterial(this.publicData2).then(res => {
      //     this.isAll2 = false
      //     res.data.forEach(ele => {
      //       ele.isOutsource = false
      //     })
      //     this.outsourcingData = res.data
      //   })
      // } else {
      //   this.outsourcingData = []
      // }
      // 后端需要这样的格式
      const arr = []
      if (e.length == 0) {

      } else {
        e.map((item) => {
          arr.push(item.id)
        })
      }
      // const engineeringRequirementId = this.engineeringRequirementIdData2.join(',')
      const planProductionDetailIds = arr.join(',')
      bomDetailBillOfMaterial1(planProductionDetailIds).then(res => {
        this.isAll2 = false
        res.data.forEach(ele => {
          ele.isOutsource = false
        })
        this.outsourcingData = res.data
      })
    },
    getInfo() {
      getMergeInfo(this.rowId).then(res => {
        this.tableData = res.data.mergeData
        this.tableData2 = res.data.mergeData
        this.engineeringRequirementIdData = [] // 后端需要把id拿出来 拼接成字符串传到接口里
        this.tableData.filter(item => {
          this.engineeringRequirementIdData.push(item.engineeringRequirementId)
        })
        this.engineeringRequirementIdData2 = [] // 后端需要把id拿出来 拼接成字符串传到接口里
        this.tableData.filter(item => {
          this.engineeringRequirementIdData2.push(item.engineeringRequirementId)
        })
        this.$nextTick(() => {
          this.$refs.table1.toggleAllSelection()
          this.$refs.table2.toggleAllSelection()
          this.isAll1 = true
          this.isAll2 = true
          // this.tableData.forEach((row) => {
          //   this.$refs.table1.toggleRowSelection(row, true)
          // })
          // this.tableData2.forEach((row) => {
          //   this.$refs.table2.toggleRowSelection(row, true)
          // })
        })
      })
    },
    handleClick(tab, event) {
      console.log(this.activeName)
    },
    chooseCode(item) {
      console.log('chooseCode', item)
      this.rowId = item.id
      this.$store.state.order.requestId = this.rowId
      this.$store.state.order.productCode = item.code
      this.outsourcingData = []
      this.materialData = []
      this.materialCode = item.code
      this.getInfo()
    },
    getList() {
      listProduction({ statusList: ['1', '3'] }).then(res => {
        this.planList = res.data
        this.$nextTick(() => {
          this.divHeight = this.$refs.main_main.offsetHeight
          console.log(this.divHeight)
        })
      })
    },
    chooseApplicationNumber(row, index) {
      this.$layer.iframe({// 弹框
        content: {
          content: ChooseApplicationNumber, // 传递的组件对象
          parent: this, // 当前的vue对象
          data: {
            row: row,
            index: index
          }// props
        },
        area: ['1320px', '800px'],
        title: '选择采购明细', // 标题
        shadeClose: false // 点击遮罩是否关闭
      })
    },
    chooseApplicationNumberCallBack(selectionsAll, row, index) {
      const cacheData = this.$deepClone(this.materialData)
      cacheData[index].details = selectionsAll
      cacheData[index].planUnmergeData = JSON.stringify(selectionsAll)
      cacheData[index].isCost = this.availabilityOfStatisticsOnProcurementCosts

      let sum = 0

      // 遍历数组，并将元素累加到求和变量中
      for (let i = 0; i < selectionsAll.length; i++) {
        sum += Number(selectionsAll[i].purchaseNum)
      }
      cacheData[index].applicationNumber = sum
      if (sum > 0) {
        cacheData[index].isSelect = true
      } else {
        cacheData[index].isSelect = false
      }
      this.materialData = cacheData
    }
  }
}
</script>

<style lang="less" scoped>
.table_container{
  margin-top: 0 !important;
}
.main_main{
  padding-top:0 !important;
  overflow: hidden;
}
.activeClass{
  background-color: rgba(56, 123, 252, 1);
  color: white;
}
.container{
  display: flex;
  flex-direction:row ;
  justify-content: space-between;
  height: 100%;
  width: 100%;
  .plan_left{
    width: 240px;
    margin-left:20px;
    margin-right: 10px;
    overflow:auto ;
    .header{
      padding: 20px 0;
      margin-bottom: 20px;
      border-bottom: 1px solid #387BFC;
    }
    .plan_item{
      width: 100%;
      padding:10px 20px;
      // text-align: center;
      cursor: pointer;
    }
    .plan_item:hover{
      background-color: rgba(56,123,252,0.5);
      color: white;
    }
  }
  .plan_right{
    width: calc(100% - 240px);
    height: 100%;
    border-left:1px solid #999 ;
  }
}
</style>
